<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>简易轮播图练习</title>
    <style>
        .box{
            width:520px;
            height:280px;
            margin:100px auto;
            position:relative;
        }
        ul{
            margin:0;
            padding:0;
            list-style:none;
        }
        li{
            position:absolute;
            display:none;
        }
        li.current{
            display: block;
        }
        section{
            width:130px;
            height:20px;
            position: absolute;
            z-index: 999;
            bottom:10px;
            left:calc(50% - 65px);
        }
        section span{
            display:inline-block;
            height:15px;
            width:15px;
            margin-left:5px;
            border-radius:50%;
            border:1px solid blueviolet;
            box-sizing: border-box;
            cursor: pointer;
        }
        .now{
            background-color:red;
        }
    </style>
</head>

<body>
<div class="box">
    <ul>
        <li class="current"><a href=""><img src="img/01.jpg" alt=""></a></li>
        <li><a href=""><img src="img/02.jpg" alt=""></a></li>
        <li><a href=""><img src="img/03.jpg" alt=""></a></li>
        <li><a href=""><img src="img/04.jpg" alt=""></a></li>
        <li><a href=""><img src="img/05.jpg" alt=""></a></li>
    </ul>
    <section>
        <span class="now"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </section>
</div>
</body>

</html>
<script>
    var lis = document.querySelectorAll('li');
    var spans = document.querySelectorAll('span');
    var timer = null;
    var index = 0;  // 记录当前显示图片的索引值
   
    var timer =  setInterval(changeImage,1000); 
    // console.log('上面='+timer); 
    function changeImage(){
        for(var i = 0;i < lis.length; i++){
            lis[i].className = '';
            spans[i].className = '';
            spans[i].onmouseover = function(){
                clearInterval(timer);
                console.log('上面='+timer);

            }
            spans[i].onmouseout = function(){
            timer = setInterval(changeImage,1000);
            console.log('下面='+timer);
            }
            
        }
                index ++;
        if(index == 5){
            index = 0;
        }
        console.log(index);
        lis[index].className = 'current';
        spans[index].className = 'now';
        
    }

   
   
</script>
